<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>马赛克</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#oc{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oc = document.getElementById("oc")
				if(oc.getContext){
					var ctx = oc.getContext("2d")
					var img = new Image()
					img.src="pic/zjc.jpg"
					img.onload = function(){
						oc.width = img.width * 2
						oc.height = img.height
						draw()
					}
					
					function draw(){
						ctx.drawImage(img,0,0)
						/* 获取旧图片的像素点 */
						var oldimagedata = ctx.getImageData(0,0,img.width,img.height)
						var newimagedata = ctx.createImageData(img.width,img.height)
						
						//定义马赛克小格子的大小
						//选中对应的格子取一个随机点
						//然后把格子中的所有像素都设为一样的颜色
						//循环整个图片
						var size = 5;
						for(var i=0;i<oldimagedata.width/size;i++){
							for(var j=0;j<oldimagedata.height/size;j++){
								
								/* 获取大格子中某个小格子的颜色 */
								var color = getpxinfo(oldimagedata,i*size+Math.floor(Math.random()*size),j*size+Math.floor(Math.random()*size));


								/* 让大格子所有的小格子的颜色一致 */
								for(var a=0;a<size;a++){
									for(var b=0;b<size;b++){
										/* 设置让大格子所有的小格子的颜色一致 */
										setpxinfo(newimagedata,i*size+a,j*size+b,color);
										
									}
								}
								debugger
								/* 把新的图重新画上 */
								ctx.putImageData(newimagedata,img.width,0)
								
							}
						}
						
						
						
					}
					
					/* 单像素操作---获取任意一个像素点的颜色值 */
					function getpxinfo(imgdata,x,y){
						var color = []
						var w = imgdata.width
						var h = imgdata.height
						var data = imgdata.data
						color[0] =data[(y*w+x)*4]
						color[1] =data[(y*w+x)*4+1]
						color[2] =data[(y*w+x)*4+2]
						color[3] =data[(y*w+x)*4+3]
						return color
					}
					
					/* 单像素操作---设置任意一个或多个像素点的颜色值 */
					function setpxinfo(imgdata,x,y,color){
						var w = imgdata.width
						var h = imgdata.height
						var data = imgdata.data
						data[(y*w+x)*4] = color[0] 
						data[(y*w+x)*4+1] = color[1]
						data[(y*w+x)*4+2] = color[2]
						data[(y*w+x)*4+3] = color[3]
						return color
					}
				
				}
				
			}
		</script>
	</head>
	<body>
		<canvas id="oc"></canvas>
	</body>
</html>
